<template>
  <el-dialog
    class="nodeDialog custom-dialog"
    v-model="dialogVisible"
    width="500"
    :show-close='false'
    modal-class="dialog-center"
  >
    <div class="custom-dialog-header">
      <div class="title-box">
          <div class="title">{{$t('message.xmindMap.icon')}}</div>
      </div>
      <svg class="close-icon" @click="cancel">
          <use xlink:href="#keowledge-danchuangguanbi1"></use>
      </svg>
    </div>
    <div class="item" v-for="item in nodeIconList" :key="item.name">
      <div class="title">{{ item.name }}</div>
      <div class="list">
        <div
          class="icon"
          v-for="icon in item.list"
          :key="icon.name"
          v-html="icon.icon"
          :class="{
            selected: iconList.includes(item.type + '_' + icon.name)
          }"
          @click="setIcon(item.type, icon.name)"
        ></div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { nodeIconList } from "./svg/icons";
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  
})
const dialogVisible = ref(false)
const iconList = ref(false)
const activeNodes = ref([])

onMounted(()=>{
  proxy.$eventBus.$on("node_active", (...args) => {
    activeNodes.value = args[1];
    if (activeNodes.value.length > 0) {
      let firstNode = activeNodes.value[0];
      iconList.value = firstNode.getData("icon") || [];
    } else {
      iconList.value = [];
    }
  });
  proxy.$eventBus.$on("showNodeIcon", () => {
    dialogVisible.value = true;
  });
})

function cancel(){
  dialogVisible.value = false
}
function setIcon(type, name) {
  let key = type + "_" + name;
  let index = iconList.value.findIndex((item) => {
    return item === key;
  });
  // 删除icon
  if (index !== -1) {
    iconList.value.splice(index, 1);
  } else {
    let typeIndex = iconList.value.findIndex((item) => {
      return item.split("_")[0] === type;
    });
    // 替换icon
    if (typeIndex !== -1) {
      iconList.value.splice(typeIndex, 1, key);
    } else {
      // 增加icon
      iconList.value.push(key);
    }
  }
  activeNodes.value.forEach((node) => {
    node.setIcon([...iconList.value]);
  });
}

</script>
<style lang="scss" scoped>
.nodeDialog {
  @include fontFamily;
  ::v-deep(.el-dialog__body) {
    padding: 0 20px;
  }

  .deleteBtn {
    margin-bottom: 20px;
  }

  .item {
    margin-bottom: 20px;
    font-weight: bold;

    .title {
      margin-bottom: 10px;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;

        &.selected {
          &::after {
            content: '';
            position: absolute;
            left: -4px;
            top: -4px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid #409EFF;
          }
        }
      }
    }
  }
}
</style>